<template>
  <div>
    <el-card class="search-card">
      <BasicForm
        ref="formData"
        defaultExpandStatus
        formItemWidth="140px"
        :formColumns="formItems"
        :dataSource="formData"
        :handleSearchForm="handleQueryForm"
        @getFormData="getFormData"
      />
    </el-card>
    <el-card class="table-card">
      <SkusTable
        ref="skusTable"
        showActionCol
        showPagination
        :tableHeight="480"
        :defaultMinWidth="100"
        :actionColWidth="300"
        :dataSource="TableInfo.list"
        :columns="TableInfo.columns"
        :loading="TableInfo.loading"
        :pageSizes="pageSizes"
        :pagination="pagination"
        :total="pagination.total"
        :actionRender="renderTableBtnAction"
        @pageChange="handlePageChange"
        @pageSizeSelect="handlePageSizeChange"
      />
    </el-card>
    <AuthCategoryDialog
      :visible.sync="authCate.visible"
      :isView="authCate.isView"
      :echoInfos="authCate.echoInfos"
      @updateTableData="getTableData"
    />
    <EditDialog
      :visible.sync="editAuth.visible"
      :departmentId="editAuth.departmentId"
      @updateTableData="getTableData"
    />
  </div>
</template>
<script>
import BasicForm from '@/components/BasicForm';
import SkusTable from '@/components/skusTable';
import skusPage from '@/mixins/commodity/skusPage';
import AuthCategoryDialog from './components/AuthCategoryDialog';
import EditDialog from './components/EditAuthDialog';
import { getTableAction } from '@/utils/getBtnsRender';
import { getInitFormData, getEchoByOptions, TableInfo } from '@/utils/getUtils';
import { setAuthBtnId } from '@/utils/bizUtils';
import {
  FORM_ITEMS,
  TABLE_COLUMNS,
  AUTH_VALUES
} from './constants';
import { getDepartAuthService } from '@/api/commodity/departmentManage/departmentManage';
export default {
  mixins: [skusPage],
  components: {
    BasicForm,
    SkusTable,
    AuthCategoryDialog,
    EditDialog
  },
  data () {
    return {
      formItems: [...FORM_ITEMS],
      formData: getInitFormData(FORM_ITEMS),
      TableInfo: new TableInfo(),
      pageSizes: [10, 100, 1000],
      authCate: {
        visible: false,
        echoInfos: {},
        isView: false
      },
      editAuth: {
        visible: false,
        departmentId: ''
      },
    }
  },
  mounted () {
    this.setTableColumns()
    this.processToDoSearch()
    this.getTableData()
  },
  methods: {
    // 渲染表格操作栏按钮
    renderTableBtnAction (h, { row }) {
      const disabled = row.authStatus == AUTH_VALUES.Not
      const actionList = [
        { label: '编辑', method: this.handleEdit, hasAuth: true },
        { label: '授权', method: this.handleAuth, hasAuth: true },
        { label: '商品负责人编辑', method: this.handleOwnerEdit, hasAuth: true, disabled },
        { label: '商品负责人查看', method: this.handleOwnerView, disabled },
      ]
      return getTableAction({ h, row, actionList, showBtn: this.showBtn })
    },
    // 查询
    processToDoSearch () {
      const dutyPersonStatus = this.$route?.query?.dutyPersonStatus
      if (dutyPersonStatus) {
        const index = this.formItems.findIndex(item => item.prop == 'dutyPersonStatus')
        index > -1 && this.formItems.splice(index, 1)
        this.formData = { ...getInitFormData(this.formItems), dutyPersonStatus }
      }
    },
    // 设置表列
    setTableColumns () {
      const categoriesIndex = TABLE_COLUMNS.findIndex(item => item.key == 'categories')
      const columns = [...TABLE_COLUMNS]
      const linkStyle = 'cursor: pointer;'
      const newCategoriesCol = {
        ...columns[categoriesIndex],
        render: (h, { row }) => {
          const categories = (row.categories ?? []).map(item => `(${item.uuid}) ${item.categoryName}`).filter(item => item)
          return (<span
            style={linkStyle}
            onClick={() => { this.handleViewAuth(row) }}
            >{ categories.join(',') }
          </span>)
        }
      }
      columns.splice(categoriesIndex, 1, newCategoriesCol)
      this.TableInfo.setColumns(columns)
    },
    getFormData (data) {
      this.formData = {
        ...data,
        organizeType: data?.hrOrganizeId ? 1 : undefined, // organizeType= 1，的时候hrOrganizeId 会被视为公司id
      }
    },
    async getTableData () {
      const data = {
        ...this.formData,
        ...this.pagination
      }
      setAuthBtnId('查询')
      const res = await getDepartAuthService(data, this.TableInfo.setLoading)
      if (res?.retData) {
        this.TableInfo.setList(res?.retData?.records)
        this.setTotalNum(res.retData.total)
      }
    },
    // 编辑
    handleEdit (row) {
      setAuthBtnId('编辑')
      this.editAuth.departmentId = row.departmentId
      this.editAuth.visible = true
    },
    // 查看授权
    handleViewAuth (row) {
      this.authCate.echoInfos = { ...row }
      this.authCate.isView = true
      this.authCate.visible = true
    },
    // 授权
    handleAuth (row) {
      setAuthBtnId('授权')
      this.authCate.echoInfos = { ...row }
      this.authCate.isView = false
      this.authCate.visible = true
    },
    // 商品负责人编辑
    handleOwnerEdit (row) {
      const { departmentId, authMetalStatus } = row
      setAuthBtnId('商品负责人编辑')
      this.$router.push({
        name: 'productOwnerEdit',
        query: { hrDepartmentId: departmentId, authMetalStatus }
      })
    },
    // 商品负责人查看
    handleOwnerView (row) {
      const { href } = this.$router.resolve({
        name: 'productOwnerView',
        query: { hrDepartmentId: row.departmentId }
      })
      window.open(href, '_blank')
    }
  }
}
</script>
